<template>
  <div style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
    <div class="container" ref="container">
      <div class="a">
        <pie-chart></pie-chart>
      </div>
      <div class="b">
        <graph-chart></graph-chart>
      </div>
      <div class="c">
        <pie-chart></pie-chart>
      </div>
      <div class="d">
        <pie-chart></pie-chart>
      </div>
      <div class="e">
        <pie-chart></pie-chart>
      </div>
      <div class="f">
        <pie-chart></pie-chart>
      </div>
      <div class="g">
        <punel-chart></punel-chart>
      </div>
      <div class="h">
        <punel-chart></punel-chart>
      </div>
      <div class="i">
        <punel-chart></punel-chart>
      </div>
      <div class="j">
        <punel-chart></punel-chart>
      </div>
      <div class="k">
        <punel-chart></punel-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import PieChart from "../components/PieChart.vue";
import GraphChart from "../components/GraphChart.vue";
import PunelChart from "../components/PunelChart.vue";
import {onMounted, ref} from "vue";

const container = ref()

const handleScale = () => {
  const designWidth = 1600, designHeight = 900
  const scale = document.documentElement.clientWidth / document.documentElement.clientHeight
  < designWidth / designHeight ?
      document.documentElement.clientWidth / designWidth :
      document.documentElement.clientHeight / designHeight
  container.value.style.transform = `scale(${scale})`
}

onMounted(() => {
  handleScale()
  window.onresize = () => handleScale()
})
</script>

<style scoped lang="less">
.container {
  //overflow: hidden;
  transform-origin: center;
  width: 1600px;
  height: 900px;
  background-color: rgb(5, 13, 35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  position: absolute;

  .a {
    grid-column: 1;
    grid-row: 1;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .b {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    width: calc(1600px / 4 * 2);
    height: calc(900px / 4 * 3);
  }

  .c {
    grid-column: 4;
    grid-row: 1;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .d {
    grid-row: 2;
    grid-column: 1;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .e {
    grid-column: 4;
    grid-row: 2;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .f {
    grid-row: 3;
    grid-column: 1;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .g {
    grid-column: 4;
    grid-row: 3;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .h {
    grid-column: 1;
    grid-row: 4;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .i {
    grid-column: 2;
    grid-row: 4;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .j {
    grid-column: 3;
    grid-row: 4;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }

  .k {
    grid-column: 4;
    grid-row: 4;
    width: calc(1600px / 4);
    height: calc(900px / 4);
  }
}
</style>